<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">个人信息</el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">个人资料</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片的导航 -->
    <div>
      <!-- :stretch="true" -->
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane name="first">
          <span slot="label" @click="fn1">基本信息</span>
          <!-- 这里引入组件 PersonalDataChild -->
          <PersonalDataChildZ></PersonalDataChildZ>
        </el-tab-pane>
        <el-tab-pane name="second">
          <span slot="label" @click="fn2">学历信息</span>
          <!-- 这里引入组件 PersonalDataChild -->
          <EducationalInformationZ></EducationalInformationZ>
        </el-tab-pane>
        <el-tab-pane name="third">
          <span slot="label" @click="fn3">资历信息</span>
          <!-- 这里引入组件 PersonalDataChild -->
          <QualifyInformationZ></QualifyInformationZ>
        </el-tab-pane>
        <el-tab-pane name="fourth">
          <span slot="label" @click="fn4">职业/执业资格</span>
          <!-- 这里引入组件 PersonalDataChild -->
          <WorkQualificationZ></WorkQualificationZ>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import PersonalDataChildZ from "./PersonalDataChildZ";
import EducationalInformationZ from "./EducationalInformationZ";
import QualifyInformationZ from "./QualifyInformationZ";
import WorkQualificationZ from "./WorkQualificationZ";

export default {
  data() {
    return {
      activeName: "first",
      
      
    };
  },
  components: {
    PersonalDataChildZ,
    EducationalInformationZ,
    QualifyInformationZ,
    WorkQualificationZ
  },
  mounted(){
    this.activeName = sessionStorage.getItem('infoIndex') || "first";
    /* 存fName，让一开始加载的时候存入路由守卫的名字 */
    sessionStorage.setItem("fName", 'PersonalData');
    // this.index = this.activeName;
    // console.log(this.index,this.activeName);
  },
  methods:{
     handleClick(tab, event) {
       this.index = tab.index;
        console.log(tab, event);
      },
    fn1(){
      sessionStorage.setItem('infoIndex', 'first');
    },
    fn2(){
      sessionStorage.setItem('infoIndex', 'second');
    },
    fn3(){
      sessionStorage.setItem('infoIndex', 'third');
    },
    fn4(){
      sessionStorage.setItem('infoIndex', 'fourth');
    },
    
  }
  // name: 'PersonalData'
};
</script>
<style scoped lang="less">
/* .el-tabs,.tab-nav {
  height: 30px;
} */
/deep/.el-tabs__item {
  border: none;
}
.el-breadcrumb {
  margin-bottom: 20px;
}
.el-tabs__header,
.el-tabs__nav-wrap,
.el-tabs__nav-scroll,
.el-tabs__nav {
  height: 60px;
  line-height: 60px;
}
</style>